Fix background to animate with thumbnails

When we animating the scale for the thumbnails, the border and
background should wrap around the current size of the thumbails.
The technique that we are using to animate the scale breaks that
since we don't animate the overall size of the thumbnails box -
we just animate our child actors within the allocation.

To fix this, switch from drawing the background by packing in another
container to drawing the background with a separate actor that
is under the other actors and allocated by our custom logic.

https://bugzilla.gnome.org/show_bug.cgi?id=641881

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index dbbf95df4ed9c66d9e41c27edbfbc3ee37e63cf5..796653bd65f13f19788474e6a9f930203e467d36 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -261,19 +261,19 @@ StTooltip StLabel {
 }
 
 .workspace-controls {
-    font-size: 32px;
-    font-weight: bold;
-    color: #ffffff;
+    visible-width: 32px; /* Amount visible before hovering */
+}
+
+.workspace-thumbnails-background {
     border: 1px solid #424242;
     border-right: 0px;
     border-radius: 9px 0px 0px 9px;
     background: #071524;
-    visible-width: 32px; /* Amount visible before hovering */
+    padding: 8px;
 }
 
 .workspace-thumbnails {
     spacing: 7px;
-    padding: 8px;
 }
 
 .workspace-thumbnail-indicator {

diff --git a/js/ui/workspaceThumbnail.js b/js/ui/workspaceThumbnail.js
index a1dccb1f74cfe7209ca77ef8c91209aff778ed0b..c810b9fb27602cfb065c23a62cd67c809542efa2 100644 (file)
--- a/js/ui/workspaceThumbnail.js
+++ b/js/ui/workspaceThumbnail.js
@@ -370,6 +370,19 @@ ThumbnailsBox.prototype = {
         this.actor.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
         this.actor.connect('allocate', Lang.bind(this, this._allocate));
 
+        // When we animate the scale, we don't animate the requested size of the thumbnails, rather
+        // we ask for our final size and then animate within that size. This slightly simplifies the
+        // interaction with the main workspace windows (instead of constantly reallocating them
+        // to a new size, they get a new size once, then use the standard window animation code
+        // allocate the windows to their new positions), however it causes problems for drawing
+        // the background and border wrapped around the thumbnail as we animate - we can't just pack
+        // the container into a box and set style properties on the box since that box would wrap
+        // around the final size not the animating size. So instead we fake the background with
+        // an actor underneath the content and adjust the allocation of our children to leave space
+        // for the border and padding of the background actor.
+        this._background = new St.Bin({ style_class: 'workspace-thumbnails-background' });
+        this.actor.add_actor(this._background);
+
         let indicator = new St.Bin({ style_class: 'workspace-thumbnail-indicator',
                                      fixed_position_set: true });
 
@@ -596,6 +609,11 @@ ThumbnailsBox.prototype = {
     },
 
     _getPreferredHeight: function(actor, forWidth, alloc) {
+        // See comment about this._background in _init()
+        let themeNode = this._background.get_theme_node();
+
+        forWidth = themeNode.adjust_for_width(forWidth);
+
         // Note that for getPreferredWidth/Height we cheat a bit and skip propagating
         // the size request to our children because we know how big they are and know
         // that the actors aren't depending on the virtual functions being called.
@@ -607,11 +625,15 @@ ThumbnailsBox.prototype = {
         let nWorkspaces = global.screen.n_workspaces;
         let totalSpacing = (nWorkspaces - 1) * spacing;
 
-        alloc.min_size = totalSpacing;
-        alloc.natural_size = totalSpacing + nWorkspaces * global.screen_height * MAX_THUMBNAIL_SCALE;
+        [alloc.min_size, alloc.natural_size] =
+            themeNode.adjust_preferred_height(totalSpacing,
+                                              totalSpacing + nWorkspaces * global.screen_height * MAX_THUMBNAIL_SCALE);
     },
 
     _getPreferredWidth: function(actor, forHeight, alloc) {
+        // See comment about this._background in _init()
+        let themeNode = this._background.get_theme_node();
+
         if (this._thumbnails.length == 0)
             return;
 
@@ -627,10 +649,16 @@ ThumbnailsBox.prototype = {
         let scale = (avail / nWorkspaces) / global.screen_height;
         scale = Math.min(scale, MAX_THUMBNAIL_SCALE);
 
-        alloc.min_size = alloc.natural_size = Math.round(global.screen_width * scale);
+        let width = Math.round(global.screen_width * scale);
+        [alloc.min_size, alloc.natural_size] =
+            themeNode.adjust_preferred_width(width, width);
     },
 
     _allocate: function(actor, box, flags) {
+        // See comment about this._background in _init()
+        let themeNode = this._background.get_theme_node();
+        let contentBox = themeNode.get_content_box(box);
+
         if (this._thumbnails.length == 0) // not visible
             return;
 
@@ -641,7 +669,7 @@ ThumbnailsBox.prototype = {
         // Compute the scale we'll need once everything is updated
         let nWorkspaces = global.screen.n_workspaces;
         let totalSpacing = (nWorkspaces - 1) * spacing;
-        let avail = (box.y2 - box.y1) - totalSpacing;
+        let avail = (contentBox.y2 - contentBox.y1) - totalSpacing;
 
         let newScale = (avail / nWorkspaces) / screenHeight;
         newScale = Math.min(newScale, MAX_THUMBNAIL_SCALE);
@@ -662,15 +690,23 @@ ThumbnailsBox.prototype = {
 
         let thumbnailHeight = screenHeight * this._scale;
         let thumbnailWidth = Math.round(screenWidth * this._scale);
-        let rightPadding = this.actor.get_theme_node().get_padding(St.Side.RIGHT);
+        let rightPadding = themeNode.get_padding(St.Side.RIGHT);
         let slideWidth = thumbnailWidth + rightPadding; // Amount to slide a thumbnail off to right
 
         let childBox = new Clutter.ActorBox();
 
+        // The background is horizontally restricted to correspond to the current thumbnail size
+        // but otherwise covers the entire allocation
+        childBox.x1 = box.x1 + ((contentBox.x2 - contentBox.x1) - thumbnailWidth);
+        childBox.x2 = box.x2;
+        childBox.y1 = box.y1;
+        childBox.y2 = box.y2;
+        this._background.allocate(childBox, flags);
+
         let indicatorWorkspace = this._indicatorConstrained ? global.screen.get_active_workspace() : null;
         let indicatorBox;
 
-        let y = box.y1;
+        let y = contentBox.y1;
 
         for (let i = 0; i < this._thumbnails.length; i++) {
             let thumbnail = this._thumbnails[i];
@@ -686,7 +722,7 @@ ThumbnailsBox.prototype = {
             let y2 = Math.round(y + thumbnailHeight);
             let roundedScale = (y2 - y1) / screenHeight;
 
-            let x1 = box.x2 - thumbnailWidth + slideWidth * thumbnail.slidePosition;
+            let x1 = contentBox.x2 - thumbnailWidth + slideWidth * thumbnail.slidePosition;
             let x2 = x1 + thumbnailWidth;
 
             if (thumbnail.metaWorkspace == indicatorWorkspace) {

diff --git a/js/ui/workspacesView.js b/js/ui/workspacesView.js
index 9fe77fc7395aac440921eeac5576a8fc7f3c0c7c..f63e3fca304f21f7e6ebd3dae4f6978ddf150635 100644 (file)
--- a/js/ui/workspacesView.js
+++ b/js/ui/workspacesView.js
@@ -621,7 +621,8 @@ WorkspacesDisplay.prototype = {
 
         let controls = new St.Bin({ style_class: 'workspace-controls',
                                     request_mode: Clutter.RequestMode.WIDTH_FOR_HEIGHT,
-                                    y_align: St.Align.START });
+                                    y_align: St.Align.START,
+                                    y_fill: true });
         this._controls = controls;
         this.actor.add_actor(controls);